<template>
	<view class="index-view">
		<uv-tabs :list="tabBar" @click="tabClick" :current="current"></uv-tabs>
		<swiper @change="changeSwiper" :current="current" :style="{height:homeHeight+'px'}">
			<swiper-item v-for="(item,index) in tabBar" :key="index">
				<view class="dom-box" v-if="current===0">
					<IndexSwiperVue :swpierData='IndexSwiperData'></IndexSwiperVue>
					<RecommendVue></RecommendVue>
					<TextCardVue cardText='人气推荐'></TextCardVue>
					<CommodityListVue></CommodityListVue>
				</view>
				<view class="dom-box" v-else-if="current===1">
					<BannerVue></BannerVue>
					<IconsVue></IconsVue>
					<TextCardVue card-text=" 热销爆品">
					</TextCardVue>
					<HotVue></HotVue>
					<TextCardVue card-text="推荐店铺"></TextCardVue>
					<ShopVue></ShopVue>

				</view>
				<view class="dom-box" v-else>
					<IndexSwiperVue :swpierData='IndexSwiperData'></IndexSwiperVue>
					<BannerVue></BannerVue>
					<IconsVue></IconsVue>
					<TextCardVue card-text=" 热销爆品">
					</TextCardVue>
					<HotVue></HotVue>
					<TextCardVue card-text="推荐店铺"></TextCardVue>
					<ShopVue></ShopVue>
				</view>

			</swiper-item>
		</swiper>
		<!-- 推荐模板 -->
		<!-- 		<IndexSwiperVue :swpierData='IndexSwiperData'></IndexSwiperVue>
		<RecommendVue></RecommendVue>
		<TextCardVue cardText='人气推荐'></TextCardVue>
		<CommodityListVue></CommodityListVue> -->

		<!-- 其他模板 --运动户外，美妆 -->
		<!-- <BannerVue></BannerVue>
		<IconsVue></IconsVue>
		<TextCardVue card-text="热销爆品"></TextCardVue>
		<HotVue></HotVue>
		<TextCardVue card-text="推荐店铺"></TextCardVue>
		<ShopVue></ShopVue> -->
	</view>
</template>

<script>
	import IndexSwiperVue from '@/components/index/IndexSwiper.vue';
	import RecommendVue from '@/components/index/Recommend.vue';
	import TextCardVue from '@/components/common/TextCard.vue';
	import CommodityListVue from '@/components/common/CommodityList.vue';
	import BannerVue from '@/components/index/Banner.vue';
	import IconsVue from '@/components/index/Icons.vue';
	import HotVue from '@/components/index/Hot.vue';
	import ShopVue from '@/components/index/Shop.vue';
	export default {
		components: {
			IndexSwiperVue,
			RecommendVue,
			TextCardVue,
			CommodityListVue,
			BannerVue,
			IconsVue,
			HotVue,
			ShopVue
		},
		data() {
			return {
				homeHeight: 0,
				current: 0,
				tabBar: [{
						name: '推荐'
					},
					{
						name: '运动户外'
					},
					{
						name: '服饰内衣'
					},
					{
						name: '鞋靴箱包'
					},
					{
						name: '美妆个护'
					},
					{
						name: '家具数码'
					},
					{
						name: '食品母婴'
					},
				],
				IndexSwiperData: [{
					src: '/static/img/swiper1.jpg',
					id: 1
				}, {
					src: '/static/img/swiper2.jpg',
					id: 2
				}, {
					src: '/static/img/swiper3.jpg',
					id: 3
				}]
			}
		},
		onLoad() {
			console.log(66666666);
			uni.request({
				url: "http://192.168.10.4:3000/api/index_list/data",
				header: {
					'Content-Type': 'application/json',
					'Authorization': 'Bearer token'
				},
				method: "GET",
				success: (res) => {
					console.log('请求成功1', res);
				},
				fail: (err) => {
					console.log(err);
				}
			})
		},
		onReady() {
			this.computerDom()
		},
		methods: {
			// 页面包裹轮播图变化
			changeSwiper(e) {
				this.current = e.detail.current
				this.computerDom()
			},
			tabClick(e) {
				this.current = e.index
				console.log('yeqian', e);
				this.computerDom()
			},
			// 计算页面高度
			computerDom() {
				let view = uni.createSelectorQuery().select('.dom-box')
				view.boundingClientRect(data => {
					// console.log('data', data);
					this.homeHeight = data.height
				}).exec()
			}
		}
	}
</script>

<style scoped lang="scss">

</style>